<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        #box {
            width: 600px;
            height: 600px;
            border: 1p solid red;
            position: relative;
            margin: 0 auto;
        }

        #box li {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            box-sizing: border-box;
            background: url(img/3.jpg);
            background-size: 600px 600px;
        }

        #box li:nth-child(1) {
            left: 0px;
            top: 0px;
        }

        #box li:nth-child(2) {
            left: 200px;
            top: 0px;
            background-position: -200px 0px;
        }

        #box li:nth-child(3) {
            left: 400px;
            top: 0px;
            background-position: -400px 0px;
        }

        #box li:nth-child(4) {
            left: 0px;
            top: 200px;
            background-position: 0px -200px;
        }

        #box li:nth-child(5) {
            left: 200px;
            top: 200px;
            background-position: -200px -200px;
        }

        #box li:nth-child(6) {
            left: 400px;
            top: 200px;
            background-position: -400px -200px;
        }


        #box li:nth-child(7) {
            left: 0px;
            top: 400px;
            background-position: 0px -400px;
        }

        #box li:nth-child(8) {
            left: 200px;
            top: 400px;
            background-position: -200px -400px;
        }

        #box li:nth-child(9) {
            left: 400px;
            top: 400px;
            background-position: -400px -400px;
        }
    </style>
</head>

<body>
    <ul id="box">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <script src="./js/dragandback.js"></script>
    <script src="./js/cssTools.js"></script>
    <script>


        var ulDom = document.getElementById("box");
        var liDoms = document.getElementsByTagName("li");
        var sourceIndex = -1;       
        var targetIndex = -1;

        window.onload = function () {
            // 拖拽
            liDoms = Array.from(liDoms);
            liDoms.forEach(function (li, index) {
                li.setAttribute("index", index);

                drag(li);

                // 源和目标
                // 1）、源：按下鼠标确定
              
                li.onmousedown = function () {
                    this.style.zIndex = 999;
                    sourceIndex = this.getAttribute("index");
                    console.log("sourceIndex",sourceIndex);
                }

                // 2)、目标：松开鼠标
                ulDom.onmousemove = function (event) {
                    var e = event || window.event;
                    var left1 = e.pageX - ulDom.offsetLeft;
                    var top1 = e.pageY - ulDom.offsetTop;

                    var row = parseInt(top1 / 200);
                    var col = parseInt(left1 / 200);

                    targetIndex = row * 3 + col;

                    console.log("targetIndex",targetIndex);

                }
 
            });

            document.onmouseup = function () {
                console.log("onmouseup",sourceIndex, targetIndex);
                // 交换
                exchange(sourceIndex, targetIndex)
            }

        }

        function exchange(sourceIndex, targetIndex) {
            console.log("exchange",sourceIndex, targetIndex);
            if (sourceIndex == -1 || targetIndex == -1) {
                return;
            }

            // 交换两个元素的 background-position；
            var tempPos = getStyle(liDoms[sourceIndex],"backgroundPosition");

            liDoms[sourceIndex].style.backgroundPosition = getStyle(liDoms[targetIndex],"backgroundPosition");

            liDoms[targetIndex].style.backgroundPosition = tempPos;

            liDoms[sourceIndex].style.zIndex = 0;

            // 复位:
            liDoms[sourceIndex].style.left = (sourceIndex%3) *200 +"px";
            liDoms[sourceIndex].style.top =  (parseInt(sourceIndex/3))*200 + "px";

        }


    </script>
</body>

</html>